<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">清洗消毒</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
  
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>物品（设施）名称</span>
            <div class="froms">
              <input type="text" name="goodname" v-model="formName.goodname" v-validate="'required'" :class="{'is-danger': errors.has('goodname')}">
            </div>
          </li>
          <li>
            <span>数量</span>
            <div class="froms">
              <input v-model="formName.num">
            </div>
          </li>
          <li>
            <span>消毒日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="formName.dataValue" @click="openPickerdDate()">
              </el-input>
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCanceDate" @confirm="handleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>消毒方式</span>
            <div class="froms">
              <input v-model="formName.way">
            </div>
          </li>
          <li>
            <span>开始时间</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="formName.startdataValue" @click="openPickerStart()">
              </el-input>
              <mt-datetime-picker v-model="startvalue1" :startHour="startHour1" :endHour="endHour1" ref="picker1" type="time" @cancel="handleCancelStart" @confirm="handleConfirmStart"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>结束时间</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="formName.enddataValue" @click="openPickerEnd()">
              </el-input>
              <mt-datetime-picker v-model="startvalue2" :startHour="startHour2" :endHour="endHour2" ref="picker2" type="time" @cancel="handleCancelEnd" @confirm="handleConfirmEnd"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span><em>*</em>消毒人员</span>
            <div class="froms">
              <el-select v-model="value"  placeholder="请选择" @click="persongetData()" name="value"  v-validate="'required'" :class="{'is-danger': errors.has('value')}">
                <!--@change="persongetData"-->
                <el-option v-for="item in listData" :key="item.unid" :label="item.name" :value="item.unid">
                  {{item.name}}
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span>消毒药剂</span>
            <div class="froms">
              <input v-model="formName.disinfectant">
            </div>
          </li>
          <li>
            <span>备注</span>
            <div class="froms">
              <input v-model="formName.note">
            </div>
          </li>
        </ul>
      </div>
  
    </main>
  </div>
</template>

<script>
  import {
    DisinfectAdd
  } from '../../api/api';
  import {
    DatetimePicker
  } from 'mint-ui';
  var moment = require('moment');
  import {
    EnterprisePersonData
  } from '../../api/api';
  
  export default {
    components: {
      'mt-datetime-picker': DatetimePicker,
    },
    data() {
      return {
        msg: '请选择人员',
        getNowFormatDate: null,
        people: this.$route.query.name,
        listData: [],
        value: '',
        name: '',
        CriteriaList: [],
        dataValue: '',
        //组件
        seachtext: '',
  
        startvalue1: '08:00', //初始开始时间 --- 选择器绑定的时间
        startvalue2: '22:00', //初始结束时间 --- 选择器绑定的时间
        startHour1: 0, // 开始时间 --- 可选范围设置
        endHour1: 22, // 开始时间 --- 可选范围设置
        startHour2: 8, // 结束时间 --- 可选范围设置
        endHour2: 23, // 结束时间 --- 可选范围设置
        pickerValue: moment().format('YYYY-MM-DD'), //获取当前时间 
        //提交表单add
        formName: { //表单中的参数
          goodname: '',
          num: '',
          versionDate: '',
          way: '',
          dataValue: '',
          startdataValue: '',
          enddataValue: '',
          disinfectant: '',
          note: '',
        },
        PageSize: 0,
        Enterprise: {},
      };
    },
    computed: {
      errors() {
        return this.$verify.$errors
      }
    },
    methods: {
      //获取日期
      openPickerdDate() {
        this.$refs.picker.open();
      },
      handleCanceDate() {
        let _this = this
        _this.pickerValue = _this.formName.dataValue
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmDate(val) {
        let _this = this
        _this.formName.dataValue = moment(val).format('YYYY-MM-DD 00:00:00')
      },
  
      //获取开始时间&&结束时间
      openPickerStart() {
        let _this = this
        if (_this.startvalue2) {
          let a = _this.startvalue2.split(':')
          _this.endHour1 = a[0] - 0
        }
        _this.$refs.picker1.open()
        setTimeout(() => {
          let vmodal = document.getElementsByClassName('v-modal')[0]
          vmodal.onclick = function() {
            _this.handleCancelStart()
          }
        }, 10)
      },
      openPickerEnd() {
        let _this = this
        if (_this.startvalue1) {
          let a = _this.startvalue1.split(':')
          _this.startHour2 = a[0] - 0
        }
        _this.$refs.picker2.open()
        setTimeout(() => {
          let vmodal = document.getElementsByClassName('v-modal')[0]
          vmodal.onclick = function() {
            _this.handleCancelEnd()
          }
        }, 10)
      },
      // 取消按钮 --- 把选择器绑定的velue恢复为输入框的dataValue
      handleCancelStart() {
        let _this = this
        _this.startvalue1 = _this.formName.startdataValue
      },
      handleCancelEnd() {
        let _this = this
        _this.startvalue2 = _this.formName.enddataValue
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmStart(val) {
        let _this = this
        if (_this.startvalue2) {
          let a = _this.startvalue2.split(':')
          let b = val.split(':') //b[0] 22  b[1] 00
          if (b[0] === a[0] && b[1] > a[1]) {
            _this.show = true
            _this.$message.error('开始时间不能晚于结束时间')
            setTimeout(function() {
              _this.show = false
            }, 2000)
            _this.$refs.picker1.open()
          } else {
            _this.formName.startdataValue = val
          }
        }
      },
      handleConfirmEnd(val) {
        let _this = this
        if (_this.startvalue1) {
          let a = _this.startvalue1.split(':')
          let b = val.split(':')
          if (b[0] === a[0] && b[1] < a[1]) {
            _this.show = true
            _this.$message.error('结束时间不能早于开始时间')
            setTimeout(function() {
              _this.show = false
            }, 2000)
            _this.$refs.picker2.open()
          } else {
            _this.formName.enddataValue = val
          }
        }
      },
  
      //获取清洗消毒人员
      persongetData() {
        this.PageSize += 10;
        //定义需要传给通讯的参数：QueryData{"PageSize":10,"CurrentPage":1,"Query":{"CriteriaList":[]}}和userunid   Enterprise.Unid
        let varQueryData = {
          PageSize: this.PageSize,
          CurrentPage: 1,
          Query: {
            CriteriaList: this.CriteriaList
          }
        }
        let query = {
          Name: 'Enterprise.Unid', //Enterprise.Unid
          Value: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
          Operate: "Equal",
          DataType: null,
          EndSuffix: "",
          Suffix: null
        }
        varQueryData.Query.CriteriaList.push(query) //往数组里面添加对象
        let options = {
          params: {
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            QueryData: JSON.stringify(varQueryData),
            //Enterprise.Unid:,
          }
        }
        //调取接口
        EnterprisePersonData(options).then((res) => {
          if (res.success === true) {
            this.user = res.data.user;
            this.listData = res.data;
          }
        })
      },
  
  
  
      //提交方法
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let a = this.formName.startdataValue.split(":")
            let b = this.formName.enddataValue.split(":")
            //定义需要传给通讯的参数：string Data--实体MorningRecord的序列化值 string UserUnid--当前操作用户标识   stringify对象解析字符串 parse字符串解析对象
            let varQueryData = {
              Unid: this.value,
            }
            let varEnterpriseUnid = {
              Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
              Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
            }
  
            let data = {
              GoodsName: this.formName.goodname,
              Num: this.formName.num,
              DisinfectDate: moment(this.formName.dataValue).format('YYYY-MM-DD hh:mm:ss'),
              Way: this.formName.way,
              StartHour: a[0],
              StartMin: a[1],
              EndHour: b[0],
              EndMin: b[1],
              EnterprisePerson: varQueryData,
              Disinfectant: this.formName.disinfectant,
              Note: this.formName.note,
              Enterprise: varEnterpriseUnid,
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            DisinfectAdd(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
          } else {
            this.$message.error('带*号为必填项，请确认填写格式正确');
          }
        })
  
  
  
      }
    },
    created() {},
    //页面加载时候
    mounted() {
      this.persongetData()
    }
  }
</script>

<style lang="scss">
  
</style>
